<template>
  <div class="reviewer">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>核销人员管理</span>
      </div>
      <div class="scr">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="">
            <el-input
              v-model="formInline.idorname"
              placeholder="核检人名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <div class="btn">
      <el-button style="margin-right:10px;" type="primary" @click="addrevbtn">添加</el-button>
      <el-popconfirm @confirm="handdelbatch" @cancel="handcancel" :title="`确定删除` + multipleSelection.length + `条吗?`">
        <el-button slot="reference" type="danger">批量删除</el-button>
      </el-popconfirm>
    </div>
    <el-table
      ref="multipleTable"
      :data="reviewerlist"
      tooltip-effect="dark"
      style="width: 100%;"
       :header-cell-style="{ 'text-align': 'center' }"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="openid" label="ID" width="200" >
      </el-table-column>
      <el-table-column prop="reviewer_name" label="姓名" width="160" >
      </el-table-column>
       <el-table-column prop="job" label="职位" width="160" >
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" width="160" >
      </el-table-column>
      <el-table-column prop="deparmentname" label="部门" width="160" s>
      </el-table-column>
     
      <el-table-column prop="is_use" label="是否启用" width="160" >
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.is_use == 1 ? true : false"
            @change="handisuseChange(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="auto">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="handlelook(scope.row.id)"
            >详情</el-button
          >
          <el-button size="mini" @click="handleEdit(scope.row)">修改</el-button>
          <el-popconfirm
            title="确定删除吗？"
            @confirm="handleDelete(scope.row.id)"
            @cancel="handcancel"
          >
            <el-button
              style="margin-left: 10px"
              slot="reference"
              size="mini"
              type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <h2>核销人详情</h2>
      <div>名称:{{ diareviewer_name }}</div>
      <div>手机号:{{ diamobile }}</div>
      <div>部门:{{ diadepartment }}</div>
      <div>责任人:{{ diajob }}</div>
      <div>是否启用:{{ diais_use == 1 ? "是" : "否" }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
    <el-pagination
      style="margin-left: 20%; margin-top: 30px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentpaget"
      :page-sizes="[10, 15, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 添加修改弹出框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item
          label="核销人员名"
          prop="reviewer_name"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.reviewer_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="手机号"
          prop="mobile"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="责任人" prop="job" :label-width="formLabelWidth">
          <el-input v-model="form.job" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <div class="block">
            <el-cascader
              v-model="value"
              :options="options"
              :props="defaultParams"
              @change="handdepChange"
            ></el-cascader>
          </div>
        </el-form-item>
        <el-form-item label="人员" :label-width="formLabelWidth">
          <el-switch
            @change="swisuseChange"
            v-model="formswvalue"
            active-text="启用"
            inactive-text="不启用"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addreviewer('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import http from "../utils/http";
export default {
  name: "VisitReviewer",
  data() {
    return {
      visibleshow: false, //删除提示
      title: "添加核销人员", //弹框 标题
      dialogFormVisible: false, //表单 弹框
      multipleSelection: [], // 复选框 批量删除
      // 列表
      reviewerlist: [],
      data: {},
      // 部门 级联选择器
      value: [],
      options: [],
      defaultParams: {
        label: "name",
        value: "id",
        children: "son",
      },
      // 搜索
      formInline: {
        idorname: "",
      },
      // 分页
      total:0,
      page: 1,
      pageSize: 10,
      currentpaget: 1,
      // 表单
      formLabelWidth: "120px", //表单宽
      formswvalue: false, // 表单 switch
      form: {
        reviewer_name: "",
        openid: "",
        mobile: "",
        department: "",
        job: "",
        is_use: 1,
        id: "0",
      },
      rules: {
        reviewer_name: [
          { required: true, message: "请输入核销人员名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "手机号11位数字",
            trigger: "blur",
          },
        ],
        job: [
          { required: true, message: "请输入责任人", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
      },
      // 详情
      // dialogVisible: false, // 弹框
      // diareviewer_name: "",
      // diamobile: "",
      // diadepartment: "",
      // diajob: "",
      // diais_use: "",
    };
  },

  mounted() {
    this.getreviewerlist();
    this.getdepartmentlist();
  },

  methods: {
    handdelbatch() {
      console.log("确定删除");
      this.delbatch();
    },
    handcancel() {
      console.log("取消删除");
    },
    //   查询
    onSubmit() {
      this.getreviewerlist();
    },
    //   当前选择部门
    handdepChange(v) {
      this.form.department = v[v.length - 1];
    },
    // 添加 清空数据
    addrevbtn() {
      this.dialogFormVisible = true;
      this.form.id = "0";
      this.form.reviewer_name = "";
      this.form.mobile = "";
      this.form.job = "";
      this.formswvalue = true;
    },
    // 添加 修改
    addreviewer(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.form.id == "0") {
            let res = await http.post("/api/visit/reviewer/add", {
              reviewer_name: this.form.reviewer_name,
              openid: this.form.openid,
              mobile: this.form.mobile,
              department: this.form.department,
              job: this.form.job,
              is_use: this.form.is_use,
            });
            if (res.code == "00000") {
              this.dialogFormVisible = false;
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.getreviewerlist();
            } else {
              this.$message({
                message: "添加失败",
                type: "error",
              });
            }
          } else {
            let res = await http.post(
              "/api/visit/reviewer/edit?id=" + this.form.id,
              { formdata: this.form }
            );
            if (res.code == "00000") {
              this.dialogFormVisible = false;
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.getreviewerlist();
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 修改form Switch状态
    swisuseChange() {
      if (this.formswvalue) {
        this.form.is_use = 1;
      } else {
        this.form.is_use = 0;
      }
    },
    // 获取部门
    async getdepartmentlist() {
      let res = await http.get("/api/visit/department/list");
      if (res.code == "00000") {
        this.options = this.getTreeData(res.data);
      }
    },
    // 部门遍历
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].son.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].son = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].son);
        }
      }
      return data;
    },
    // 批量删除
    async delbatch() {
      let data = [];
      for (let index = 0; index < this.multipleSelection.length; index++) {
        data.push(this.multipleSelection[index].id);
      }
      console.log(data);
      let res = await http.get("/api/visit/reviewer/del", { id: data });
      if (res.code == "00000") {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.getreviewerlist();
      }
    },
    // 是否启用
    async handisuseChange(e) {
      if (e.is_use == 1) {
        e.is_use = false;
        let res = await http.post("/api/visit/reviewer/changestatus", {
          id: e.id,
          is_use: e.is_use,
        });
        this.$message({
          type: "success",
          message: "停用成功!",
        });
        return;
      } else if (e.is_use == 0) {
        e.is_use = true;
        let res = await http.post("/api/visit/reviewer/changestatus", {
          id: e.id,
          is_use: e.is_use,
        });
        this.$message({
          type: "success",
          message: "启用成功!",
        });
        return;
      }
    },
    // 每页显示
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getreviewerlist();
    },
    // 当前分页
    handleCurrentChange(val) {
      this.page = val;
      this.getreviewerlist();
    },
    // 获取数据
    async getreviewerlist() {
      let res = await http.get("/api/visit/reviewer/list", {
        page: this.page,
        pageSize: this.pageSize,
        idorname: this.formInline.idorname,
      });
      console.log(res);
      if (res.code == "00000") {
        this.reviewerlist = res.data;
        this.total = res.total;
      }
    },
    // 复选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 详情
    handlelook(id) {
     this.$router.push({
        name: 'Verificationpersonneldetails',
        params: {
          id:id
        }
      })
    },
    // 修改
    async handleEdit(e) {
      this.title = "修改核销人员";
      this.dialogFormVisible = true;
      this.form.id = e.id;
      this.form.reviewer_name = e.reviewer_name;
      this.form.openid = e.openid;
      this.form.mobile = e.mobile;
      this.form.department = e.department;
      this.form.job = e.job;
      this.form.is_use = e.is_use;
      if (e.is_use == 1) {
        this.formswvalue = true;
      } else {
        this.formswvalue = false;
      }
      this.value = this.getTreeDeepArr(e.department, this.options);
    },
    // 重填
    getTreeDeepArr(key, treeData) {
      let arr = []; // 在递归时操作的数组

      let returnArr = []; // 存放结果的数组

      let depth = 0; // 定义全局层级

      function childrenEach(childrenData, depthN) {
        for (var j = 0; j < childrenData.length; j++) {
          depth = depthN; // 将执行的层级赋值 到 全局层级

          arr[depthN] = childrenData[j].id;
          if (childrenData[j].id == key) {
            // returnArr = arr; // 原写法不行, 因 此赋值存在指针关系

            returnArr = arr.slice(0, depthN + 1); //将目前匹配的数组，截断并保存到结果数组，
            break;
          } else {
            if (childrenData[j].son) {
              depth++;

              childrenEach(childrenData[j].son, depth);
            }
          }
        }
        return returnArr;
      }
      return childrenEach(treeData, depth);
    },
    // 删除
    async handleDelete(e) {
      let res = await http.get("/api/visit/reviewer/del", { id: e });
      if (res.code == "00000") {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.getreviewerlist();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.reviewer {
  .btn {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
.el-pagination {
  text-align: center;
  margin-top: 10px;
}
.demo-form-inline{
  height: 40px !important;
}
</style>